<template>
    <div class="index-box">
        <div class="bg">
            <div class="slogan">
                连接人与人之间的
                <br />世界
                <div class="slogan-en">
                    Connecting the world between 
                     <br />people
                </div>
            </div>
            <div class="bottom">
                <div class="login">
                 <van-button round type="primary" style="padding: 0 50px;font-size: 14px" 
                    color="#28AE61" size="small" @click="toLogin">
                    登&nbsp;&nbsp;&nbsp;&nbsp;录
                 </van-button>
                </div>
                <div class="register">
                    <van-divider><span style="color: #fff" @click="toRegister">账号注册</span></van-divider>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';

const router = useRouter()

const toLogin = () => {
    router.push({ path: '/login', query: { from: '1' }})   
}

const toRegister = () => {
    router.push('/register')   
}

</script>
<style lang="less" scoped>
.index-box {
    .bg {
        position:fixed;
        top: 0;
        left: 0;
        width:100%;
        height:100%;
        z-index:-10;
        zoom: 1;
        background-image: url('@/assets/bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;  
        .slogan {
          position: absolute;
          bottom: 40%;  
          left: 30px;
          color: #fff;
          font-size: 24px;
          letter-spacing: 3px;
          .slogan-en {
              font-size: 16px;
              letter-spacing: 0;
              font-weight: 300;
              margin-top: 20px;  
          }
        }
        .bottom {
            position: absolute;
            left: 50%;
            bottom: 15%;
            transform: translate(-50%);
        }
    }
}
</style>